Lifting State Up
同じ変更を複数のコンポーネントに伝播したいケースなどに、shared stateのリフトアップを推奨する
Adding a Second Input
入力値を2つに増やし、親から与えられたpropsによって振る舞いを変更する
code:JavaScript
class Calculator extends React.Component {
render() {
return (
<div>
<TemperatureInput scale="c" />
<TemperatureInput scale="f" />
</div>
);
}
}
const scaleNames = {
c: 'Celsius',
f: 'Fahrenheit'
};
class TemperatureInput extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {temperature: ''};
}
handleChange(e) {
this.setState({temperature: e.target.value});
}
render() {
const temperature = this.state.temperature;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temperature in {scaleNamesscale}:</legend> <input value={temperature}
onChange={this.handleChange} />
</fieldset>
);
}
}
Writing Conversion Functions
code:JavaScript
// 変換関数
function toCelsius(fahrenheit) {
return (fahrenheit - 32) * 5 / 9;
}
function toFahrenheit(celsius) {
return (celsius * 9 / 5) + 32;
}
// 変換処理
function tryConvert(temperature, convert) {
const input = parseFloat(temperature);
if (Number.isNaN(input)) {
return '';
}
const output = convert(input);
const rounded = Math.round(output * 1000) / 1000;
return rounded.toString();
}
Lifting State Up
propsで受け渡すイベントハンドラ名については特に決まりはない
例ではonTemperatureChangeとしているがonChangeとかでもよい
shared stateを親のCalculatorに持っていったので、そのsetStateが呼ばれるたびにCalculatorと2つのTemperatureInputも再描画される(renderメソッドが呼ばれる)
実際その先はReactが差分のみ再描画するため高速に動作する
しかし、renderメソッド内の関数は呼ばれるため計算コストの高い処理をそこで呼ぶと遅くなりそう
code:JavaScript
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>The water would boil.</p>;
}
return <p>The water would not boil.</p>;
}
const scaleNames = {
c: "Celsius",
f: "Fahrenheit"
};
class TemperatureInput extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.props.onTemperatureChange(e.target.value);
}
render() {
console.log("TemperatureInput render", this.props.scale);
const temperature = this.props.temperature;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temperature in {scaleNamesscale}:</legend> <input value={temperature} onChange={this.handleChange} />
</fieldset>
);
}
}
function toCelsius(fahrenheit) {
return ((fahrenheit - 32) * 5) / 9;
}
function toFahrenheit(celsius) {
return (celsius * 9) / 5 + 32;
}
function tryConvert(temperature, convert) {
const input = parseFloat(temperature);
if (Number.isNaN(input)) {
return "";
}
const output = convert(input);
const rounded = Math.round(output * 1000) / 1000;
return rounded.toString();
}
class Calculator extends React.Component {
constructor(props) {
super(props);
this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
this.state = { temperature: "", scale: "c" };
}
handleCelsiusChange(temperature) {
this.setState({ scale: "c", temperature });
}
handleFahrenheitChange(temperature) {
this.setState({ scale: "f", temperature });
}
render() {
console.log("Calculator render");
const scale = this.state.scale;
const temperature = this.state.temperature;
const celsius =
scale === "f" ? tryConvert(temperature, toCelsius) : temperature;
const fahrenheit =
scale === "c" ? tryConvert(temperature, toFahrenheit) : temperature;
return (
<div>
<TemperatureInput
scale="c"
temperature={celsius}
onTemperatureChange={this.handleCelsiusChange}
/>
<TemperatureInput
scale="f"
temperature={fahrenheit}
onTemperatureChange={this.handleFahrenheitChange}
/>
<BoilingVerdict celsius={parseFloat(celsius)} />
</div>
);
}
}
Lessons Learned
データはsingle “source of truth”であるべき
データの保持はトップダウンデータフローで行う
導出可能な値はstateに持つべきではない
↑の例のcelsiusとfahrenheitのようにrenderメソッド内で再計算を行えばよい